<template>
  <div>
  <swiper>
    <div class="swiper-slide">
      <img src="../assets/Snipaste_2022-10-24_15-50-46.png" alt="">
    </div>
  </swiper>
  <div class="tabs-bar">
    <ul>
      <li>正在热映</li>
      <li>正在热映</li>
    </ul>
  </div>
  </div>
</template>
<script>
import swiper from "@/components/Swiper";
export default{
  components: {
    swiper, //局部注册swiper组件
  },
}
</script>
<style lang="scss" scoped>
.tabBtn{
  padding-bottom:10px;
}
.active-border{
    border-bottom: 1px solid red !important;
}
.swiper-slide {
  img {
    width: 100%;
    height: 8rem;
  }
}
.tabs-bar {
  height: 49px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  -o-transition: transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.35, 0, 0.25, 1),
    -webkit-transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
  position: relative;
  ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  li {
  width: 50%;
  text-align: center;
  height: 16px;
  line-height: 16px;
  font-size: 0.4rem;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
}
}

</style>
